<template>
  <div class="home">
    <van-search
        shape="round"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
    />
    <!--通知    -->
    <van-notice-bar
        left-icon="volume-o"
        text="生命在于运动！活到老，学到老！"
    />
    <!--    <van-notice-bar-->
    <!--        color="#1989fa"-->
    <!--        background="#ecf9ff"-->
    <!--        left-icon="volume-o"-->
    <!--        text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"-->
    <!--    />-->

    <!-- 轮播图 -->
    <swiper-com :banner="banner"></swiper-com>
    <!-- grid 居家-志趣组件 -->
    <gird :channel="channel"></gird>


  </div>
</template>

<script>
// 导入轮播图组件
import SwiperCom from "@/components/SwiperCom";
import Gird from "@/components/Grid";

export default {
  name: "Home",
  data() {
    return {
      value: "",
      banner: [
        {
          "id": 1,
          "image_url": require('@/assets/images/s1.png')
        },
        {
          "id": 2,
          "image_url": require('@/assets/images/s2.png')
        },
        {
          "id": 3,
          "image_url": require('@/assets/images/s3.png')
        },
      ],  //轮播图
      channel: [
        {
          id: 1,
          name: "会议",
          icon_url: require('@/assets/icon/meeting.png')
        },
        {
          id: 2,
          name: "打卡",
          icon_url: require('@/assets/icon/chock.png')
        },
        {
          id: 3,
          name: "统计",
          icon_url: require('@/assets/icon/total.png')
        },
        {
          id: 4,
          name: "管理",
          icon_url: require('@/assets/icon/work.png')
        },
        {
          id: 5,
          name: "通知",
          icon_url: require('@/assets/icon/notice.png')
        },
        {
          id: 6,
          name: "会议",
          icon_url: require('@/assets/icon/meeting.png')
        },
        {
          id: 7,
          name: "打卡",
          icon_url: require('@/assets/icon/chock.png')
        },
        {
          id: 8,
          name: "统计",
          icon_url: require('@/assets/icon/total.png')
        },
        {
          id: 9,
          name: "管理",
          icon_url: require('@/assets/icon/work.png')
        },
        {
          id: 10,
          name: "通知",
          icon_url: require('@/assets/icon/notice.png')
        },
      ],  //居家-志趣数据
    }
  },
  components: {
    Gird,
    SwiperCom
  },
  created() {
  },
  methods: {
    onSearch() {
    },
    onCancel() {
    },
  },
}
</script>

<style lang='less' scoped>
</style>
